<!-- eslint-disable vue/no-v-for-template-key -->
<!--
 * @Description: 顶部一级导航栏
 * @Author: liushuang
 * @Date: 2022-04-21 11:53:07
 * @LastEditTime: 2022-09-05 17:48:19
-->
<!-- 顶部一级菜单左边只能放四个 右边只能放两个 -->
<template>
  <div class="row-menu" :class="{right: props.position === 'right'}">
    <template v-for="(item, index) in AllRoutes" :key="item.fullPath">
      <div
        v-if="(props.position === 'left' && index < 4) || (props.position === 'right' && index >= 4)"
        class="row-menu-item"
        :class="{ active: item.fullPath === activeParentPath.fullPath }"
        :index="item.fullPath"
        @click="clickMenuItem(item)"
      >
        <span>{{ item.meta.title }}</span>
      </div>
    </template>
  </div>
</template>

<script setup>
import {
  computed, watch, ref, defineProps
} from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'

const props = defineProps({
  position: {
    type: String,
    default: 'left'
  }
})

const store = useStore()
const route = useRoute()
const router = useRouter()

const AllRoutes = computed(() => store.state.routes.routes.filter((item) => item.meta && !item.meta.hidden))

/**
 * @desc: 点击导航跳转并存储子路由
 * @param {*} item
 */
const clickMenuItem = (item) => {
  router.push(item.fullPath)
  store.commit('routes/setSecondRouts', item.children)
}

/**
 * @desc: 检查这个路由下是否包含某个路由
 */
const checkHasRoute = (currentPath, routes) => {
  if (routes.fullPath === currentPath) return true
  const { children } = routes
  if (!children) return false
  // 如果有子路由，递归检查
  for (let i = 0; i < children.length; i += 1) {
    if (checkHasRoute(currentPath, children[i])) return true
  }
  return false
}
const activeParentPath = ref(null)
/**
 * @desc: 取得被激活路由的一级菜单
 */
const getActiveTopPath = (activePath, routes) => {
  for (let i = 0; i < routes.length; i += 1) {
    if (checkHasRoute(activePath, routes[i])) return routes[i]
  }
  return null
}

/**
 * @desc: 监听路由变化，找到一级路由并存储当前一级路由的子路由
 */
watch(
  () => route.fullPath,
  (fullPath) => {
    activeParentPath.value = getActiveTopPath(fullPath, AllRoutes.value)
    if (activeParentPath.value) {
      store.commit('routes/setSecondRouts', activeParentPath.value.children)
    }
  },
  { immediate: true }
)

</script>

<style scoped lang="scss">
.right{
  padding-left: 45px !important;
}
.row-menu {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  padding-left: 30px;
  box-sizing: border-box;
  .row-menu-item {
    margin-right: 16px;
    padding: 8px 16px;
    box-sizing: border-box;
    border-radius: 20px;
    border: 1px solid transparent;
    font-size: 18px;
    color: #d0deee;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.1s;
    position: relative;
    &:hover {
      color: #fff;
    }
  }
  .active {
    color: #fff !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(
        0deg,
        rgba(91, 161, 247, 0.4) 0%,
        rgba(91, 161, 247, 0) 100%
      ),
      linear-gradient(
        180deg,
        rgba(62, 76, 103, 0.2) 17.86%,
        rgba(92, 104, 132, 0.062) 100%
      ),
      linear-gradient(90deg, #3e4c67 0%, rgba(92, 104, 132, 0.5) 100%) !important;
    border: 1px solid #8194b1 !important;
    overflow: hidden;
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 104px;
      height: 42px;
      background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 49.9%,
        transparent 50%,
        transparent 100%
      );
    }
  }
  .icon {
    font-size: 20px;
    margin-right: 8px;
  }
}
</style>
